// 上述方法有缺陷，需要一个额外的temp全局变量
function defineReactive(obj, key, value = obj[key]) {
  // observe(value)
  Object.defineProperty(obj, key, {
    get() {
      console.log('get property ' + key);
      return value
    },
    set(newValue) {
      if (value === newValue) return
      value = newValue

      // observe(newValue) // 如果加入的值是对象，对象中的值也要被监听
      // console.log(typeof value);
      console.log('set property ' + key + ` -> ${newValue}`);
      if (typeof value === 'object') new Observer(value)
    }
  })
}

// 如果obj有多个属性，创建Observer类来遍历obj，让obj的每个属性都可以被劫持
class Observer {
  constructor(obj) {
    this.obj = obj
    this.walk()
  }
  walk() {
    Object.keys(this.obj).forEach(key => {
      if (typeof this.obj[key] === 'object') {
        console.log(1);
        new Observer(this.obj[key])
      }
      //  else {
      defineReactive(this.obj, key)
        // }
        // defineReactive(this.obj, key)
    })
  }
}


// 如果有属性的嵌套呢？--> 递归遍历
function observe(obj) {
  if (typeof obj !== 'object') return
  new Observer(obj)
}

obj2 = {
  a: 1,
  b: 2,
  c: {
    d: 3,
    e: 4
  }
}

new Observer(obj2)
  // console.log(obj2.c.d);
  // defineReactive(obj2, 'c', {
  //   g: 66,
  //   h: 77
  // })

// obj2.c = {
//   g: 66,
//   h: 77
// }
console.log(obj2.c.d);
obj2.c = {
  g: 77,
  h: 88
}
console.log(obj2.c.g);